<template>
  <div class="home">
    <div class="search">
      <div class="log iconfont icon-shu">
        
      </div>
      <div class="sear">
        <i class="iconfont">&#xe600;</i>
        <span>搜索商品/店铺/种类</span>
      </div>
      <div class="cai">
        <img src="../../public/images/img/菜单.png" alt="" />
      </div>
    </div>
    <div class="lbt">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(banner,index) in bannerImg" :key="index">
          <img :src="banner.imgUrl" alt="" />
        </van-swipe-item>
     
      </van-swipe>
    </div>
    <div class="list">
      <router-link :to="'/bookslist?data='+2" tag="div" class="item">
        <img src="../../public/images/img/图书.png" alt="" />
        <img src="../../public/images/img/tongshu.png" alt="" />
        <img src="../../public/images/img/xinshubang-1620826881.png" alt="" />
        <img src="../../public/images/img/电子书.png" alt="" />
        <img src="../../public/images/img/当当头条.png" alt="" />
        <img src="../../public/images/img/fuzhuang-1620826753.png" alt="" />
        <img src="../../public/images/img/2021110422460978561.png" alt="" />
        <img src="../../public/images/img/ertongjiexin-1623317699.png" alt="" />
        <img src="../../public/images/img/2021111720171975184.png" alt="" />
        <img src="../../public/images/img/qiandao-1620826984.png" alt="" />
      </router-link >
      <div class="lis">
        <div class="li"></div>
        <div class=""></div>
      </div>
    </div>
    <div class="hot" v-if="booksData">

      <router-link :to="'/bookslist?data='+item.type" tag="div" class="item" v-for="item in newBooksData" :key="item.type">
        <div class="title">
          <span>{{item.titleText}}</span>
          <img :src="item.labelImgUrl" alt="" />
        </div>
        <!-- <div class="img">
                    <img :src="booksData.booksData[0].img[0]" alt="">
                    <img :src="booksData.booksData[1].img[0]" alt="">
                    <i></i>
                    <i></i>
                </div>
                <div class="txt">
                    <span>{{booksData.booksData[0].name}}</span>
                    <span>{{booksData.booksData[1].name}}</span>
                </div> -->
        <div class="content">
          <div class="books" v-for="(books,index) in item.pitContent" :key="index">
            <div class="imgs">
              <img :src="books.imgUrl" alt="" />
              <div class="noe">
                <img :src="books.labelImgUrl" alt="" />
              </div>
            </div>
            <div class="text">
              {{ books.productTitle }}
            </div>
          </div>

          <!-- <div class="books">
            <div class="imgs">
              <img :src="newBooksData[0].pitContent[1].imgUrl" alt="" />
              <div class="noe">
                <img src="../../public/images/img/2.png" alt="" />
              </div>
            </div>
            <div class="text">
              {{ newBooksData[0].pitContent[1].productTitle }}
            </div>
          </div> -->
        </div>
      </router-link>

      <!-- <router-link to="/bookslist?data=新书热卖榜" tag="div" class="item">
        <div class="title">
          <span style="padding-left: 5px">新书上架</span>
          <img src="../../public/images/img/抢先.png" alt="" />
        </div>

        <div class="content">
          <div class="books">
            <div class="imgs">
              <img :src="booksData.newBooksData[0].img[0]" alt="" />
            </div>
            <div class="text">
              {{ booksData.newBooksData[0].name }}
            </div>
          </div>

          <div class="books">
            <div class="imgs">
              <img :src="booksData.newBooksData[1].img[0]" alt="" />
            </div>
            <div class="text">
              {{ booksData.newBooksData[1].name }}
            </div>
          </div>
        </div>
      </router-link> -->

    </div>
    <div class="snapped" v-if="snappedData">
      <div class="item">
        <div class="title">
          {{snappedData.topic.titleText}}
          <div class="right">
            <van-count-down :time="snappedData.topic.todayKillTime">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
          </div>
          <div class="more">
            查看更多<img src="../../public/images/img/下载.png" alt="" />
          </div>
        </div>
        <div class="lis">
          <div class="li" v-for="index in 4" :key="index">
            <div class="img">
              <img :src="snappedData.pitContent[index].imgUrl" alt="">
              <div class="price">
                <div class="text">￥{{snappedData.pitContent[index].killPrice}}</div>
                <img src="https://img60.ddimg.cn/upload_img/00866/zhangleijsztyf/qiang-1624865882.png" alt="">
              </div>
            </div>
            <div class="kill_price">
              <del>￥{{snappedData.pitContent[index].origPrice?snappedData.pitContent[index].origPrice:9.9}}</del>
            </div>
          </div>
        </div>
       
      </div>
      
    </div>
    
    <enjoy-list></enjoy-list>

    <footer-nav></footer-nav>
  </div>
</template>

<script>
import FooterNav from "../components/FooterNav.vue";
import { getHomepageBall } from "../api/home";
import { getBooks,getBanner,getNavImg,snapped } from "../api/home2";
import EnjoyList from '../components/EnjoyList.vue';
export default {
  components: { FooterNav, EnjoyList },

  data() {
    return {
      booksData: null,
      newBooksData:null,
      bannerImg:null,
      snappedData:null,
    };
  },
  methods: {
    //图书榜数据
    getHomepageBallFun() {
      getHomepageBall().then((data) => {
        this.booksData = data;
        console.log(this.booksData);
      });
    },
  //今日抢购
      snappedFun() {
      snapped().then((data) => {

        this.snappedData = data.data[115404]

        console.log(this.snappedData);

      });
    },
//tab图片
  getNavImgFun() {
      getNavImg().then((data) => {
      
        console.log(data);
      });
    },
  //底部列表数据
    getBooksFun() {
      getBooks().then((data) => {
        this.newBooksData = data.data[110347].bestNewContent;
        console.log(this.newBooksData);
      });
    },
  //轮播图数据
    getBannerFun() {
      getBanner().then((data) => {
        this.bannerImg = data.data[117229].pitContent;
        // console.log(this.bannerImg);
      });
    },
  },
  created() {
    this.getHomepageBallFun();
    this.getBooksFun();
    this.getBannerFun();
    this.getNavImgFun();
    this.snappedFun();
  },
};
</script>

<style lang="scss" scoped>
.home {
  .search {
    height: 44px;
    display: flex;
    align-items: center;
    .log {
      width: 30px;
      height: 30px;
      display: flex;
      border-radius: 50%;
      margin: 0 8px;
      font-size:30px;
      color: #EDD388;
      border: 1px solid #EDD388;
      justify-content: center;
      img {
        width: 30px;
        height: 37px;
        display: block;
      }
    }
    .cai {
      width: 44px;
      height: 39.5px;
      display: flex;
      justify-content: center;
      img {
        width: 20px;
        height: 37px;
      }
    }
    .sear {
      height: 30px;
      flex: 1;
      background-color: #f6f6f6;
      border-radius: 25px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      i {
        width: 16px;
        height: 16px;
        display: block;
        margin: 0 9px;
      }
      span {
        color: #999999;
        font-size: 15px;
      }
    }
  }
  .lbt {
    height: 110px;
    display: flex;
    padding: 0 11px;
    background-image: url("../../public/images/img/轮播图背景.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    align-items: flex-end;
    .my-swipe .van-swipe-item {
      width: 351px;
      height: 104px;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      // background-color: #39a9ed;
      img {
        border-radius: 10px;
        width: 100%;
        display: block;
      }
    }
  }
  .list {
    padding-top: 4px;
    .item {
      display: flex;
      flex-wrap: wrap;
      img {
        width: 75px;
        height: 65px;
      }
    }
    .lis {
      width: 100%;
      height: 8px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 4px;
      div {
        width: 3px;
        height: 2px;
        background-color: #bababa;
        margin-right: 4px;
      }
      .li {
        width: 9px;
        background-color: #141414;
      }
    }
  }
  .hot {
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    background-color: #fff7f7;
    .item {
      background-image: linear-gradient(#fff7f7, #ffffff);
      border-radius: 4px;
      padding-bottom: 12px;
      flex: 1;
      .content {
        padding-left: 10px;
        display: flex;
        justify-content: space-between;
        .books {
          width: 76px;

          .imgs {
            position: relative;
            img {
              width: 76px;
              height: 76px;
            }
            .noe {
              position: absolute;
              width: 22px;
              height: 22px;
              top: 0;
              left: 0;
              img {
                width: 100%;
                height: auto;
              }
            }
          }
          .text {
            // display: flex;
            font-size: 12px;
            color: #565656;
            line-height: 14px;
            height: 14px;
            overflow: hidden;
            -webkit-box-pack: center;
            margin-top: 6px;
            text-align: center;
          }
        }
      }
    }
    .title {
      padding: 12px 0 10px 10px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      span {
        color: #141414;
        font-size: 15px;
        font-weight: bold;
      }
      img {
        width: 72px;
        height: 16px;
        margin-right: 15px;
      }
    }
  }
  .hot .img,
  .txt {
    background-color: #fff;
  }
  .snapped {
    padding: 0 12px;
    background-color: #f6f6f6;
    .item {
      background-color: #fff;
      border-bottom-right-radius: 10px;
      border-bottom-left-radius: 10px;
      padding-bottom: 6px;
      .title {
        padding: 11px 0 8px 11px;
        font-size: 15px;
        color: #141414;
        font-weight: bold;
        background-color: #fff7f7;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        display: flex;
        align-items: flex-end;
        img {
          width: 72px;
          height: 16px;
          display: block;
          margin-left: 10px;
        }
        .right {
          display: flex;
          align-items: center;
          margin-left: 6px;
          flex: 1;
           .colon {
            display: inline-block;
            margin: 0 4px;
            color: #ee0a24;
          }
          .block {
            border-radius: 6px;
            display: inline-block;
            width: 22px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            background-color: #F95F5D;
          }
        }
        .more {
          display: flex;
          align-items: flex-end;
          font-size: 12px;
          color: #a6a5a6;
          img {
            width: 12px;
            height: 15px;
            display: block;
            margin-left: 5px;
            margin-right: 5px;
          }
        }
      }
      &:nth-child(2) {
        margin-top: 9px;
        background-color: #f6f6f6;
      }
      .lis {
        padding-top: 3px;
        margin: 0 12px;
        height: 108px;
        display: flex;
        justify-content: space-between;
        .li{
          .img{
            margin-top: 5px;
            width: 76px;
            height: 76px;
            position: relative;
            img{
              width: 100%;
              display: block;
            }
            .price{
              position: absolute;
              border: 1px solid #fff;
              width: 62px;
              height: 20px;
              margin: 0 auto;
              left: 0;
              right: 0;
              background-color: #F96160;
              display: flex;
              justify-content: space-between;
              border-radius: 20px;
              align-items: center;
              padding: 0 4px;
              bottom: -10px;
              .text{
                color: #fff;
                font-size: 12px;
                font-weight: 700;
              }
              img{
                width: 14px;
                height: 14px;
              }
            }
          }
          .kill_price{
            margin-top: 10px;
            display: flex;
            justify-content: center;
            color: #a0a0a0;
          }
        }
      }
      
      
    }
  }
}
</style>